<template>
	<view class="page-wrap">
		<u-form :model="form" ref="uForm">
			<u-form-item label="金额" prop="amount">
				<u-input v-model="form.amount" placeholder="请输入金额" />
			</u-form-item>
			<u-form-item label="数量" prop="num">
				<u-input v-model="form.num" placeholder="请输入数量" />
			</u-form-item>
		</u-form>
		<view @click="pays='deposit'" class="u-flex u-row-between u-p-30" style="border-bottom: 1rpx solid #F6F6F6FF;">
			<view class="u-flex">
				<view class=" u-flex">
					<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/card.png" mode="aspectFill" width="50rpx"
						height='50rpx'>
					</u-image>
					<view class="u-m-l-30 u-font-28 u-weight">钱包支付</view>
				</view>
				<view class="u-m-l-30">
					<view class=" cl_898989FF u-font-24">余额<text class="cl_FB473CFF">￥{{userinfo.user_wallet}}</text>
					</view>
				</view>
			</view>
			<view class="u-flex">

				<view class="">
					<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c1.png" mode="aspectFill" width="30rpx"
						height='30rpx' v-if="pays=='deposit'"></u-image>
					<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c.png" mode="aspectFill" width="30rpx"
						height='30rpx' v-else></u-image>
				</view>
			</view>

		</view>
		<view style="color: #afacac;font-size: 26rpx;padding: 14rpx;">请充值余额并优先选择余额支付</view>
		<!-- #ifdef MP-WEIXIN || APP || H5 -->
		<view @click="pays='wechat'" class="u-flex u-row-between u-p-30" style="border-bottom: 1rpx solid #F6F6F6FF;">
			<view class="">
				<view class=" u-flex">
					<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/wx.png" mode="aspectFill" width="50rpx"
						height='50rpx'>
					</u-image>
					<view class="u-m-l-30 u-font-28 u-weight">微信支付</view>
				</view>

			</view>
			<view class="u-flex">

				<view class="">
					<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c1.png" mode="aspectFill" width="30rpx"
						height='30rpx' v-if="pays=='wechat'"></u-image>
					<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c.png" mode="aspectFill" width="30rpx"
						height='30rpx' v-else></u-image>
				</view>

			</view>

		</view>
		<!-- #endif -->
		
		<!-- #ifdef MP-ALIPAY || APP || H5 -->
		<view @click="pays='alipay'" class="u-flex u-row-between u-p-30" style="border-bottom: 1rpx solid #F6F6F6FF;">
			<view class="">
				<view class=" u-flex">
					<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/zf.png" mode="aspectFill" width="50rpx"
						height='50rpx'>
					</u-image>
					<view class="u-m-l-30 u-font-28 u-weight">支付宝支付</view>
				</view>

			</view>
			<view class="u-flex">

				<view class="">
					<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c1.png" mode="aspectFill" width="30rpx"
						height='30rpx' v-if="pays=='alipay'"></u-image>
					<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c.png" mode="aspectFill" width="30rpx"
						height='30rpx' v-else></u-image>
				</view>
			</view>

		</view>
		<!-- #endif -->
		<u-popup v-model="shows" mode='center'>
			<view class="u-p-30 u-h-200" v-if="shows">
				<u-message-input :focus="true" :maxlength='6' @finish="finish"></u-message-input>
			</view>
		</u-popup>
		<u-toast ref="uToast" />
		<u-button class="u-m-t-20" type="success" @click="submit">支付生成邀请码</u-button>
	</view>
</template>

<script>
	import {
		URL
	} from '@/config/config.js'
	export default {
		data() {
			return {
				form: {
					amount: '',
					num: ''
				},
				pays: 'wechat',
				userinfo: {},
				shows: false,
				rules: {
					amount: [{
							type: 'number',
							message: '金额必须是数字',
							trigger: 'change'
						}, {
							required: true,
							message: '请输入金额',
							// 可以单个或者同时写两个触发验证方式
							trigger: ['change', 'blur']
						},

					],
					num: [{
							type: 'number',
							message: '数量必须是数字',
							trigger: 'change'
						}, {
							required: true,
							message: '请输入数量',
							// 可以单个或者同时写两个触发验证方式
							trigger: ['change', 'blur']
						},

					]
				}
			}
		},
		onLoad() {
			this.userinfo = uni.getStorageSync("userinfo") || {}
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						this.getChargeAmount()
					} else {
						console.log('验证失败');
					}
				});
			},
			getChargeAmount() {
				this.$api.getChargeAmount({
					...this.form,
					type: 1,
					qrcode_url: `${URL.split('index.php')[0]}member/#/pages/login/register`
				}, res => {
					this.pay(res.data.data)
					// console.log(res)
				})
			},
			finish(e) {
				console.log('输入结束，当前值为：' + e);
				this.yuePay(e)
				this.shows = false
			},
			yuePay(e) {
				this.$api.go_pay2({
					...this.params,
					trade_pwd: e
				}, res => {
					if (res.data.code == 1) {
						this.$refs.uToast.show({
							title: '提交成功',
							type: 'success',
							callback: cal => {
								uni.navigateBack()
							}
						})

					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						})
					}
				})
			},
			pay(obj) {
				let params = {
					target_id: obj.code_id,
					target_type: 'deduct_charge',
					pay_type: this.pays,
					// #ifdef APP-PLUS
					client: 'APP',
					// #endif
					// #ifdef MP-WEIXIN || MP-ALIPAY
					client: 'JSAPI',
					// #endif
					// #ifdef H5
					client: 'WAP',
					// #endif
					trade_pwd: '',
					random: 1
				}
				if (this.pays == 'deposit') {
					this.shows = true
					this.params = params
					return
				}
				// #ifdef APP-PLUS
				this.$com.wxPay2(params, this.pays).then(ok => {
					console.log(ok)
					this.$refs.uToast.show({
						title: '提交成功',
						type: 'success',
						callback: cal => {
							uni.navigateBack()
						}
					})
				})
				// #endif
				// #ifdef H5
				this.$com.wxPay2(params, this.pays).then(ok => {
					console.log(ok)
					const div = document.createElement('div');
					div.id = 'alipay';
					div.innerHTML = ok;
					document.body.appendChild(div);
					document.querySelector('#alipay').children[0].submit()
				})
				// #endif
				// #ifdef MP-WEIXIN
				this.$com.weChatPay2(params, this.pays).then(ok => {
					this.$refs.uToast.show({
						title: '提交成功',
						type: 'success',
						callback: cal => {
							uni.navigateBack()
						}
					})
				})
				// #endif
				
				// #ifdef MP-ALIPAY
				this.$com.aliPay2(params, this.pays).then(ok => {
					this.$refs.uToast.show({
						title: '提交成功',
						type: 'success',
						callback: cal => {
							uni.navigateBack()
						}
					})
				})
				// #endif
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style>
	.page-wrap {
		min-height: 100vh;
		padding: 30px;
		text-align: center;
		/* background-color: #ec1830; */
	}
</style>